<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">
    <div class="top">
      <h1>0</h1>
    </div>
    <div class="btnBox">
      <button class="go">开始</button>
      <button class="stop">暂停</button>
      <button class="reset">清空</button>
    </div>
  </div>
  <script>
    //1、获取元素
    const date = document.querySelector('h1') //获取到要显示计时的标签
    const go = document.querySelector('.btnBox .go') //开始
    const stop = document.querySelector('.btnBox .stop') //暂停
    const reset = document.querySelector('.btnBox .reset') //清空
    //2、定义变量
    let i = 0; //i作为控制定时器的控制量
    //3、在点击开始前，暂停和清空两个按钮我们给他禁用
    stop.disabled = true
    reset.disabled = true
    //4、当点击开始，触发定时器
    go.addEventListener('click', function () {
      const stopDate = setInterval(function () {
        i++
        //把i渲染到date中
        date.innerHTML = i
        //同时打开暂停按钮
        stop.disabled = false

        //判定如果清空处于不禁用的情况下，在开启的时候禁用掉清空
        //因为点击暂停后，清空按钮就打开了，然后再点开始，清空按钮是可用的
        //为了防止开启后暂停，再开启时，清空可用，判定清空按钮禁用即可
        if (reset.disabled == false) {
          reset.disabled = true
        }

        //5、当点击暂停按钮，停止定时器
        stop.addEventListener('click', function () {
          clearInterval(stopDate)
          //暂停以后，打开清空的按钮
          reset.disabled = false
          //6、然后开启清空的事件
          reset.addEventListener('click', function () {
            i = 0 //重新赋值i
            date.innerHTML = i
            //当清空了以后，就需要重新禁用掉暂停和清空
            stop.disabled = true
            reset.disabled = true
          })
        })
      }, 1000)
    })
  </script>
</body>

</html>